﻿<h4>Default</h4>
<FluentNumberField @bind-Value=value1 Appearance="FluentInputAppearance.Filled"></FluentNumberField>
<FluentNumberField @bind-Value=value2 Appearance="FluentInputAppearance.Filled" Label="label"></FluentNumberField>

<h4>Placeholder</h4>
<FluentNumberField @bind-Value=value3 Appearance="FluentInputAppearance.Filled" Placeholder="Placeholder"></FluentNumberField>

<!-- Required -->
<h4>Required</h4>
<FluentNumberField @bind-Value=value4 Appearance="FluentInputAppearance.Filled" Required="true"></FluentNumberField>

<!-- Disabled -->
<h4>Disabled</h4>
<FluentNumberField @bind-Value=value5 Appearance="FluentInputAppearance.Filled" Disabled="true"></FluentNumberField>
<FluentNumberField @bind-Value=value6 Appearance="FluentInputAppearance.Filled" Disabled="true" Label="label"></FluentNumberField>
<FluentNumberField @bind-Value=value7 Appearance="FluentInputAppearance.Filled" Disabled="true" Placeholder="placeholder"></FluentNumberField>

<!-- Read only -->
<h4>Read only</h4>
<FluentNumberField @bind-Value=value8 Appearance="FluentInputAppearance.Filled" ReadOnly="true"></FluentNumberField>
<FluentNumberField @bind-Value=value9 Appearance="FluentInputAppearance.Filled" ReadOnly="true" Label="label"></FluentNumberField>

@code {
    int? value1, value2, value3, value4, value5, value6, value7, value8=3, value9=4;
}